<template>
  <header class="header">
    <div class="lefts">
      <button class="buts" @click="goBack">返回上一级</button>
      <button class="buts" @click="Fullscreen">切换全屏</button>
    </div>
    <div class="rights">
        <button class="buts3">一张图</button>
        <button class="buts2">河长制管理</button>
        <button class="buts2">河湖四乱</button>
        <button class="buts2">水政执法</button>
        <button class="buts2">视频智能</button>
    </div>
  </header>
</template>

<script lang="ts" setup> 

// 切换全屏
const Fullscreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement.requestFullscreen().catch((err) => {
      console.log(`切换全屏时出现错误: ${err.message}`);
    });
  } else {
    // 退出全屏
    document.exitFullscreen();
  }
};

// 返回上一级
const goBack = () => {
  window.history.back(); // 浏览器返回上一页
};

</script>

<style lang="scss" scoped>
.header {
 
  top: -2vh;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-content: center;
  position: relative;
  width: 100vw; /* 缩小宽度 */
  height: 13vh; /* 缩小高度 */
  background: transparent; /* 背景透明 */
  background-image: url("/src/images/header-bg.wwAbwZiA.png");
  background-repeat: no-repeat;
  background-size: cover; /* 确保背景图片适应 */
}
.lefts{
    
    }
    .right{
        
        
    }
    //左侧按钮
.buts{
    z-index: 1000;
    top: 50px;
    left: 20px;
    background-color: #294465;
    color: #fff;
    position: relative; // 相对位置，不然默认是静态
    border-radius: 5px; /* 倒角 */
    height: 33px;
    width: 110px;
    font-weight: 500; //文字加粗
    margin: 0 8px;
}
//右侧按钮
.buts2{
    z-index: 1000;
    top: 50px;
    left: 200px;
    background-color: #294465;
    color: #fff;
    position: relative; // 相对位置，不然默认是静态
    border-radius: 5px; /* 倒角 */
    height: 33px;
    width: 110px;
    font-weight: 500; //文字加粗
    margin: 0 5px;
}
//一张图按钮
.buts3{
    z-index: 1000;
    top: 50px;
    left: 200px;
    background-color: #294465;
    color: #fff;
    position: relative; // 相对位置，不然默认是静态
    border-radius: 5px; /* 倒角 */
    height: 33px;
    width: 70px;
    font-weight: 500; //文字加粗
    margin: 0 5px;
}


</style>